/******************** 变量 ********************/
$lv-collapse-color-normal: $text-color !default;
$lv-collapse-color-disabled: $text-color-disabled !default;
$lv-collapse-icon-color: $icon-color !default;
$lv-collapse-simple-body-bg-color: transparent !default;

$lv-collapse-header-padding: 0 0.36rem 0 $padding-md !default;
$lv-collapse-body-border: $border-width-base $border-style-base $lv-collapse-body-border-color;
$lv-collapse-body-radius: 0 0 $border-radius-md $border-radius-md;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-collapse-panel {
  margin-bottom: $margin-xs;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-coeff;

  > .lv-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: $height-lg;
    padding: $lv-collapse-header-padding;
    background: $lv-collapse-header-bg-color;
    border-radius: $border-radius-md;
    cursor: pointer;

    &.lv-collapse-header-extra {
      padding-right: $padding-md;
    }

    &.lv-collapse-header-loading {
      cursor: not-allowed;
      opacity: 0.8;

      .lv-icon-loading {
        @include icon-size;

        margin-right: $margin-xs;
      }
    }

    > .lv-collapse-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;

      > i {
        flex-shrink: 0;
        margin-right: $margin-xs;
        color: $lv-collapse-icon-color;
        transform: rotateZ(-90deg);
        transition: transform $motion-duration-sm $motion-func-ease;

        &.down {
          transform: rotateZ(0deg);
        }
      }

      > .lv-collapse-title-text {
        width: 100%;
        overflow: hidden;
        color: $lv-collapse-color-normal;
        font-weight: $font-weight-bold;
        font-size: $font-size-base;
      }

      > .lv-collapse-extra {
        flex: 0 0 auto;
        margin-left: 0.48rem;
      }
    }

    &[disabled] {
      cursor: not-allowed;

      > .lv-collapse-title {
        > i,
        > .lv-collapse-title-text {
          color: $lv-collapse-color-disabled;
        }
      }
    }
  }

  > .lv-collapse-body {
    background-color: $lv-collapse-body-bg-color;
    border: $lv-collapse-body-border;
    border-top: none;
    border-radius: $lv-collapse-body-radius;

    .lv-collapse-content {
      margin: 0 $margin-md;
      padding: $padding-md 0.2rem;
    }
  }
}

.lv-collapse-panel-large > .lv-collapse-wrapper > .lv-collapse-panel {
  > .lv-collapse-header {
    height: $height-xl;

    > .lv-collapse-title > .lv-collapse-title-text {
      font-size: 0.2rem;
    }
  }
}

.lv-collapse-panel-simple > .lv-collapse-wrapper > .lv-collapse-panel {
  margin-bottom: $margin-sm;

  > .lv-collapse-header {
    display: inline-flex;
    max-width: 100%;
    height: auto;
    padding: 0;
    background: none;
  }

  > .lv-collapse-body {
    background: $lv-collapse-simple-body-bg-color;
    border: none;

    > .lv-collapse-content {
      margin: 0;
    }
  }
}
